<template>
  <component :is="ct.comp.guide" />
  <div>
    <div class="dljjc_box3_x" style="min-height: 1000px">
      <m-tabs
        :value="cfg.route.params?.id"
        :data="val"
        @update:value="ct.tabhand"
        :list="ct.tablist"
      />
      <template v-if="cfg.route.params.id == 'raids-olist'">
        <component :is="ct.comp.raids_olist" />
      </template>
      <template v-else-if="cfg.route.params.id == 'engraving-box'">
        <component :is="ct.comp.engraving_box" />
      </template>
    </div>
  </div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
import guide from "./set.vue";

export default {
  setup() {
    const ct = {
      load: (bl) => {
        val.comp_loading = false;
      },
      tabhand: (routename) => {
        if (cfg.route.path == `/gt/cb-${routename}`) {
          return false;
        }
        val.comp_loading = true;
        cfg.router.push({
          path: `/gt/cb-${routename}`,
        });
      },
      comp: {
        raids_top_team: defineAsyncComponent(() => import(`./comp/gb_raids_create.vue`)),
        raids_olist: defineAsyncComponent(() => import(`./comp/gb_raids_olist.vue`)),
        engraving_box: defineAsyncComponent(() => import(`./comp/gb_egv_box.vue`)),
        guide,
      },
      tablist: [
        { name: "engraving-simulate", title: "刻印模拟" },
        { name: "guardian-mastery", title: "基地精通模拟" },
        { name: "diamond-revenue", title: "钻石收入计算" },
      ],
    };
    const val = reactive({
      comp_loading: false,
    });
    onMounted(async () => {
      val.comp_loading = true;
    });
    return { cfg, ct, val };
  },
};
</script>
